<div class="pd10">
    <ul>
        <li class="anniu1" (click)="tabControlVisibleBoolean()">查询</li>
        <li class="anniu2" (click)="tabControlVisibleBoolean()">查</li>
    </ul>

    <div class="border-frame-div">
        <!--
        <div class="con-content-header">
            <button (click)="back()">执&nbsp;&nbsp;&nbsp;&nbsp;行</button>
        </div>
        -->
        <div class="pd10 rightComponentQueryInputPaddingTop5">
            <dx-data-grid class="yang-fang" #mainGrid id="gridContainer" [dataSource]="gridDataSource"
                          (onSelectionChanged)='selection($event)' [showColumnLines]="true" [showRowLines]="true"
                          [showBorders]="true" [rowAlternationEnabled]="true" [allowColumnResizing]="true"
                          columnResizingMode="widget" width="100%" height="550" [hoverStateEnabled]="true"
                          noDataText="暂无数据">
                <dxo-export [enabled]="true" fileName="" [allowExportSelectedData]="false"></dxo-export>
                <dxo-selection selectAllMode="page" showCheckBoxesMode="always" mode="multiple">
                </dxo-selection>
                <dxo-load-panel text="加载中..."></dxo-load-panel>
                <dxo-remote-operations [sorting]="false" [paging]="true"></dxo-remote-operations>
                <dxo-paging [pageSize]="15"></dxo-paging>
                <dxo-pager [showPageSizeSelector]="true" [showInfo]="true" [showNavigationButtons]="true"
                           [allowedPageSizes]="[15,50,100]" infoText="总计{2}条数据" visible="true">
                </dxo-pager>
                <#list columnEntitys as item>
                    <#if !item.jdbcType ??>
                        <dxi-column caption="${item.excelRowData.fieldChineseName }"
                                    dataField="${item.excelRowData.fieldName }" alignment="center"
                                    width="200px"></dxi-column>
                    <#elseif item.jdbcType == "VARCHAR">
                        <#if item.excelRowData.fieldChineseName?contains("状态")>
                            <dxi-column caption="${item.excelRowData.fieldChineseName }"
                                        dataField="${item.excelRowData.fieldName }"
                                        cellTemplate="${item.excelRowData.fieldName }Template" alignment="center"
                                        width="200px"></dxi-column>
                            <div *dxTemplate="let data of '${item.excelRowData.fieldName }Template'">
                                {{${item.excelRowData.fieldName }Status[data.value]}}
                            </div>
                        <#else>
                            <dxi-column caption="${item.excelRowData.fieldChineseName }"
                                        dataField="${item.excelRowData.fieldName }" alignment="center"
                                        width="200px"></dxi-column>
                        </#if>
                    <#elseif item.jdbcType == "DATETIME">
                        <dxi-column caption="${item.excelRowData.fieldChineseName }"
                                    dataField="${item.excelRowData.fieldName }" dataType="date"
                                    format="yyyy-M-d HH:mm:ss" alignment="center" width="200px"></dxi-column>
                    <#else>
                        <dxi-column caption="${item.excelRowData.fieldChineseName }"
                                    dataField="${item.excelRowData.fieldName }" alignment="center"
                                    width="200px"></dxi-column>
                    </#if>
                </#list>
            </dx-data-grid>

        </div>

        <div class="screen" [ngStyle]="{'display': visibleBoolean ? 'none':'block'}">
            <div class="tit">查询条件<span class="disappear" (click)="exot()">×</span>
                <dx-form id="form" #searchform class="mb20 mb" [(formData)]="searchModel" labelLocation="top">
                    <dxi-item itemType="group" [colCount]="1">
                        <#list columnEntitys as item>
                            <#if item.excelRowData.condition == true>
                                <#if item.excelRowData.type == "text" && item.excelRowData.condition == true && item.maxLength gt 0>
                                    <dxi-item [label]="{text: '${item.excelRowData.fieldChineseName }'}"
                                              [editorOptions]="{ placeholder:'', maxLength: ${item.maxLength }}"
                                              editorType="dxTextBox"
                                              dataField="${item.excelRowData.fieldName }">
                                    </dxi-item>
                                <#elseif item.excelRowData.type == "date" && item.excelRowData.condition == true>
                                    <dxi-item [label]="{text: '${item.excelRowData.fieldChineseName }开始'}"
                                              [editorOptions]="{
                                                                    placeholder:'', displayFormat:'yyyy-MM-dd'}"
                                              editorType="dxDateBox"
                                              dataField="${item.excelRowData.fieldName }Start">
                                    </dxi-item>
                                    <dxi-item [label]="{text: '${item.excelRowData.fieldChineseName }结束'}"
                                              [editorOptions]="{
                                                                    placeholder:'', displayFormat:'yyyy-MM-dd'}"
                                              editorType="dxDateBox"
                                              dataField="${item.excelRowData.fieldName }End">
                                    </dxi-item>
                                <#elseif item.excelRowData.type == "select" && item.excelRowData.condition == true>
                                    <dxi-item [label]="{
                                                                            text: '${item.excelRowData.fieldChineseName }' }"
                                              editorType="dxSelectBox"
                                              [editorOptions]="{placeholder: '--请选择--', dataSource: ${item.excelRowData.fieldName }Source,
                                                                        valueExpr: 'key', displayExpr:'value'}"
                                              dataField="${item.excelRowData.fieldName }">
                                    </dxi-item>
                                <#elseif item.excelRowData.type == "drop_bukrs" && item.excelRowData.condition == true>
                                    <dxi-item itemType="group" [colCount]="1">
                                        <dxi-item
                                                [label]="{text:'${item.excelRowData.fieldChineseName }',height:'35px'}">
                                            <div *dxTemplate>
                                                <dx-drop-down-box [(value)]="gridBoxValue" valueExpr="bukrs"
                                                                  displayExpr="butxt" placeholder="请选择${item.excelRowData.fieldChineseName }"
                                                                  [showClearButton]="true"
                                                                  [dataSource]="companyDataSource">
                                                    <div *dxTemplate="let data of 'content'">
                                                        <dx-data-grid height="500" [dataSource]="companyDataSource"
                                                                      [columns]="['butxt', 'bukrs']"
                                                                      [filterRow]="{ visible: true }"
                                                                      [selection]="{ mode: 'multiple' }"
                                                                      [hoverStateEnabled]="true"
                                                                      [scrolling]="{ mode: 'infinite' }"
                                                                      [(selectedRowKeys)]="gridBoxValue"
                                                                      (onSelectionChanged)="selectCompany($event)">
                                                            <dxi-column caption="公司名称" dataField="butxt"
                                                                        alignment="center"></dxi-column>
                                                            <dxi-column caption="公司代码" dataField="bukrs"
                                                                        alignment="center"></dxi-column>
                                                        </dx-data-grid>
                                                    </div>
                                                </dx-drop-down-box>
                                            </div>
                                        </dxi-item>
                                    </dxi-item>
                                <#elseif item.excelRowData.type == "drop_werks" && item.excelRowData.condition == true>
                                    <dxi-item itemType="group" [colCount]="1">
                                        <dxi-item
                                                [label]="{text:'${item.excelRowData.fieldChineseName }',height:'35px'}">
                                            <div *dxTemplate>
                                                <dx-drop-down-box [(value)]="gridBoxValue_factory" valueExpr="werks"
                                                                  displayExpr="name1" placeholder="请选择${item.excelRowData.fieldChineseName }"
                                                                  [showClearButton]="true"
                                                                  [dataSource]="factoryDataSource">
                                                    <div *dxTemplate="let data of 'content'">
                                                        <dx-data-grid height="500" [dataSource]="factoryDataSource"
                                                                      [columns]="['werks', 'name1']"
                                                                      [filterRow]="{ visible: true }"
                                                                      [selection]="{ mode: 'multiple' }"
                                                                      [hoverStateEnabled]="true"
                                                                      [scrolling]="{ mode: 'infinite' }"
                                                                      [(selectedRowKeys)]="gridBoxValue_factory"
                                                                      (onSelectionChanged)="selectFactory($event)">
                                                            <dxi-column caption="工厂名称" dataField="name1"
                                                                        alignment="center"></dxi-column>
                                                            <dxi-column caption="工厂代码" dataField="werks"
                                                                        alignment="center"></dxi-column>
                                                        </dx-data-grid>
                                                    </div>
                                                </dx-drop-down-box>
                                            </div>
                                        </dxi-item>
                                    </dxi-item>
                                </#if>
                            </#if>
                        </#list>
                    </dxi-item>
                    <dxi-item>
                        <dx-button class="btn_green_ml5 btn_green_4word btn_green_mt5" type="success"
                                   (click)="search()" text="查询">
                        </dx-button>
                        <dx-button class="btn_green_ml5 btn_green_4word btn_green_mt5" type="success"
                                   (click)="reset()" text="重置">
                        </dx-button>
                    </dxi-item>
                </dx-form>
            </div>
        </div>
    </div>
</div>
